import React, { Component } from 'react'
// 引入store 用于获取redux中保存的状态
 import store from '../../redux/store'
export default class Count extends Component {
  // componentDidMount(){//这种写法每个组件都得来一次 比较繁琐  直接在index.js 入口文件监听
  //   // 监测redux中状态变化 只要变化就调用render
  //   store.subscribe(()=>{
  //     // this.render()  不好使  不可以直接调用
  //     this.setState({})//此时改变状态 调用了render
  //   })
  // }
  increment =()=>{
     store.dispatch({type:'increment',data:this.selectNum.value*1})//不保证更新render 要借助store.subscribe()
  }
  decrement =()=>{
    store.dispatch({type:'decrement',data:this.selectNum.value*1})//不保证更新render

  }
  incrementIfOdd =()=>{
    const count = store.getState()
    if(count%2!==0){
      store.dispatch({type:'increment',data:this.selectNum.value*1})//不保证更新render
    }
  }
  incrementAsync =()=>{
    setTimeout(() => {
      store.dispatch({type:'increment',data:this.selectNum.value*1})//不保证更新render
    }, 800);
  }
  render() {
    return (
      <div>
        <h1>当前求和为：{store.getState()}</h1>
        <select ref={c=>this.selectNum=c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button> &nbsp;
        <button onClick={this.decrement}>-</button> &nbsp;
        <button onClick={this.incrementIfOdd}>当前和为奇数+</button> &nbsp;
        <button onClick={this.incrementAsync}>异步+</button>
      </div>
    )
  }
}
